<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>预约详情</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../../css/mui.min.css">
		<link rel="stylesheet" href="../../css/app.css">
		<style>
			/*其他*/
			.mui-bar-nav~.mui-content{padding:0;margin-top:.9rem;}
			.mui-slider-item{min-height:10rem;}
			.mui-sliders{z-index:1;width:100%;overflow:hidden;margin:0 auto;background:#fff;}
			.mui-sliders .mui-slider-groups{position: absolute; top:1.55rem;bottom: 0;width: 100%;height: auto;overflow:auto;background:#fff;}
			.mui-sliders .mui-slider-groups .mui-slider-item {position: relative;display: inline-block;width: 100%;
    height: 100%;vertical-align: top; white-space: normal;}
			/*切换菜单*/
			.mui-segmented-control{width:6rem;overflow:hidden;margin:0 auto;background:#f4f4f4;border-radius:.1rem;height:.82rem;line-height:.82rem;margin-bottom:.3rem;margin-top:.47rem;}
			.mui-segmented-control .mui-control-item{line-height:.82rem;font-size:.3rem;}
			.mui-segmented-control .mui-control-item{color:#666}
			.mui-segmented-control .mui-control-item.mui-active{background:#1653fc;color:#fff;border-radius:.1rem;}
			.mui-segmented-control .mui-control-item,.mui-segmented-control{border:none;}
			/*基本信息*/
			.basic_info{width:100%;float:left;padding:0;margin:0;}
			.basic_info>li{width:100%;height:.85rem;line-height:.85rem;border-bottom:1px solid #e5e5e5;}
			.basic_info>li>label{width:1.85rem;float:left;text-align:right;font-size:.26rem;color:#999;}
		    .basic_info>li>span{font-size:.26rem;color:#333;width:5.12rem;float:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} 
		    /*材料信息*/
		    .datum_cont{width:100%;float:left;background:#f5f5f5;}
		    .datum_cont .datum_cont_list{padding:.25rem;box-sizing:border-box;width:100%;background:#fff;margin-bottom:.15rem;float:left;}
		    .datum_cont_list .datum_left{width:.85rem;text-align:center;float:left;font-size:.26rem;line-height:.45rem;}
		    .datum_cont_list .datum_right{width:6rem;float:left;}
		    .datum_cont_list .datum_right .datum_title,.datum_info{width:100%;float:left;}
		    .datum_right .datum_title>.titles{line-height:.45rem;color:#333;font-size:.26rem;max-width:5.1rem;float:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
		    float:left;border-radius:.06rem;margin-top:.02rem;}
		    .datum_info>span{font-size:.24rem;color:#777;float:left;max-width:45%;white-space:nowrap;float:left;margin-right:.25rem;line-height:.4rem;overflow:hidden;text-overflow:ellipsis;}
		    .datum_right .datum_title .blue_bg{background:#2bc9f6;}
		   
		</style>
	</head>
	<body>
		<div class="mui-content">
			<div class="mui-sliders">
				<div id="segmentedControl" class="mui-segmented-control">
					<a class="mui-control-item mui-active" href="#item1">
						基本信息
					</a>
					<a class="mui-control-item" href="#item2">
						所需材料
					</a>
				</div>
			<div class="mui-slider-groups" id="itemContents">
				<!--基本信息-->
				<div id="item1" class="mui-control-content mui-active">
					<div id="scroll" class="">
						 <ul class="basic_info">
						 	<li>
						 		<label>预约事项</label>
						 		<span>{{onlineBookingRecInfo.serviceName}}</span>
						 	</li>
						 	<li>
						 		<label>预约号</label>
						 		<span>{{onlineBookingRecInfo.bespeakNum}}</span>
						 	</li>
						 	<li>
						 		<label>预约部门</label>
						 		<span>{{onlineBookingRecInfo.organName}}</span>
						 	</li>
						 	<li>
						 		<label>预约人</label>
						 		<span>{{onlineBookingRecInfo.userName}}</span>
						 	</li>
						 	<li>
						 		<label>身份证号</label>
						 		<span>{{onlineBookingRecInfo.userID}}</span>
						 	</li>
						 	<li>
						 		<label>预约时间</label>
						 		<span>{{onlineBookingRecInfo.time}}</span>
						 	</li>
						 	<li v-if="onlineBookingRecInfo.sysj_show">
						 		<label>剩余时间</label>
						 		<span >{{onlineBookingRecInfo.timeDifference}}</span>
						 	</li>
						 	<li>
						 		<label>预约状态</label>
						 		<span>{{onlineBookingRecInfo.bespeakStatus}}</span>
						 	</li>
						 	<li>
						 		<label>受理地点</label>
						 		<span>{{onlineBookingRecInfo.locationName}}{{onlineBookingRecInfo.locationAddr}}</span>
						 	</li>
						 </ul>
					</div>
				</div>
			    <!--材料信息-->
			    <div id="item2" class="mui-control-content">
					<div id="scroll" class="">
						<div class="datum_cont" v-if="materials_show">
							<div class="datum_cont_list" v-for="material in materials">
								<span class="datum_left">{{material.xh}}</span>
								<div class="datum_right">
									<div class="datum_title">
										<span class="titles">{{material.materialName}}</span>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			</div>
		</div>
	
	<script src="../../js/mui.min.js"></script>
	<script src="../../js/jquery2.2.4.min.js"></script>
	<script src="../../js/common.js"></script>
    <script src="../../js/vue.min.js"></script>

	<script>
			mui.plusReady(function() {
				var oid = utils.getUrlParam('oid');
				loadData(oid);
			});
			
			var itemContents = new Vue({
				el: '#itemContents',
				data: {
					onlineBookingRecInfo: {}, //基本数据
					materials: [], //材料列表信息
					materials_show:false //材料列表是否有数据 false 表示无数据  true 表示有数据
				}
			});
			
			/**
			 * 加载数据
			 * @param {Object} oid 主键
			 */
			function loadData(oid){
				utils.showWaiting();
				var param = 'oid=' + oid;
				var url = 'appHttpService/appUserCenterOnlineBookingView.do';
				utils.ajax(url, function(data) {
					data = JSON.parse(data);
					if(data.code == 0) {
						var onlineBookingRec = data.onlineBookingRec;
						var sxHandleLocation = data.sxHandleLocation;
						var serviceName = data.serviceName;
						var organName = data.organName;
						var timeDifference = data.timeDifference;
						var materialList = JSON.parse(data.materialList);
						var sysj_show = false;
						if(onlineBookingRec.bespeakStatus == 0){
							sysj_show = true;
						}
						
						itemContents.onlineBookingRecInfo = {
							serviceName: serviceName,
							bespeakNum: onlineBookingRec.bespeakNum,
							organName: organName,
							userName: onlineBookingRec.userName,
							userID:onlineBookingRec.userID,
							time:utils.format(onlineBookingRec.bookingDay,'yyyy-MM-dd')+" "+onlineBookingRec.bookingTime,
							bespeakStatus: getBespeakStatusVal(onlineBookingRec.bespeakStatus),
							locationAddr: "("+sxHandleLocation.locationAddr+")",
							locationName: sxHandleLocation.locationName,
							timeDifference:timeDifference,
							sysj_show:sysj_show
						};
						
						//材料信息
						if(materialList != null && materialList.length>0){
							itemContents.materials_show = true;
							itemContents.materials = itemContents.materials.concat(convertMaterials(materialList));
						}
					}
					closeWaitingAndShowView();
				}, param);
			}
			
			/**
			 * 加载数据后调用点击的方法
			 */
			function getBespeakStatusVal(bespeakStatus) {
				var bespeakStatusVal = "";
				if(bespeakStatus == 0) {
					bespeakStatusVal = "已预约";
				} else if(bespeakStatus == 1) {
					bespeakStatusVal = "已取消";
				} else if(bespeakStatus == 2) {
					bespeakStatusVal = "预约完成";
				} else if(bespeakStatus == 3) {
					bespeakStatusVal = "预约失效";
				}
				return bespeakStatusVal;
			}
			
			/**
			 * 材料信息字段组装
			 * 1、将服务端返回数据，转换成前端需要的格式
			 * 2、若服务端返回格式和前端所需格式相同，则不需要改功能
			 * @param {Object} items 将服务端返回数据，转换成前端需要的格式
			 * @param {Object} blStatus 办件状态
			 */
			function convertMaterials(items,blStatus) {
				var newItems = [];
				var index = 0;
				items.forEach(function(item) {
					index ++;
					newItems.push({
						xh: index,
						materialName: item.materialName
					});
				});
				return newItems;
			}
			
		</script>
	</body>
</html>
